<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/style.css">
  <title>post请求</title>
  </title>
</head>

<body>
  <h1>这是分页！</h1>
  <a href="./index.html">
    <h2>返回主页！</h2>
  </a>

  <script>
    // post 请求
    const url = 'http://localhost:8000/info'

    const xhr = new XMLHttpRequest()

    xhr.open('post', url)

    // 发送 post 请求 需要设置请求头 服务器需要的数据类型为 form
    // xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

    // 发送数据
    // xhr.send('a=1&b=2')

    // 另一种类型 JSON格式
    xhr.setRequestHeader('content-type', 'application/json')
    xhr.send(JSON.stringify({
      a: 1,
      b: 2
    }))

    console.log('你好，我是客户端分页，正在发送 post 请求！')

    // 处理响应
    xhr.onreadystatechange = function () {

      // 判断是否成功接收后台的响应
      if (xhr.readyState === 4) {
        // 根据状态码判断请求成功与否
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
          console.log('已收到服务器返回的信息：')
          console.log(JSON.parse(xhr.responseText)) // 接收响应字段
        }
      }
    }
  </script>
</body>

</html>